<template>
    <div class="admin-index">
        <el-container>
            <!-- 左侧 -->
            <el-aside>
                <el-row class="header" type="flex" align="middle">
                    <img :src="logoUrl" alt="logo" />
                    <span>飞书项目管理系统</span>
                </el-row>

                <!-- 默认选择的菜单 -->
                <el-menu :default-active="currentPath" router>
                    <el-menu-item
                        :index="item.path"
                        v-for="item in menu"
                        :key="item.path"
                    >
                        <i
                            style="margin-right: 15px"
                            :class="[
                                'iconfont',
                                menuInfo[item.path]
                                    ? menuInfo[item.path]['icon']
                                    : 'el-icon-setting',
                            ]"
                        ></i>
                        <span slot="title">{{ item.name }}</span>
                    </el-menu-item>
                </el-menu>
            </el-aside>

            <!-- 右侧 -->
            <el-container>
                <!-- 上 -->
                <el-header>
                    <span>{{ menuName }}</span>

                    <el-dropdown @command="handleCommand">
                        <div class="profile">
                            <span>{{ user.nickname.substr(-1) }}</span
                            ><i class="el-icon-arrow-down el-icon--right"></i>
                        </div>

                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item command="edit-info"
                                >修改信息</el-dropdown-item
                            >
                            <el-dropdown-item command="logout"
                                >退出登录</el-dropdown-item
                            >
                        </el-dropdown-menu>
                    </el-dropdown>
                </el-header>

                <!-- 中 -->
                <el-main>
                    <!-- 子路由组件插槽 -->
                    <router-view />
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
import logoUrl from "@/assets/logo.png";

export default {
    data() {
        return {
            logoUrl,
            menuName: "首页",
            currentPath: window.location.pathname,
            user: JSON.parse(window.sessionStorage.getItem("user")),
            menu: JSON.parse(window.sessionStorage.getItem("menu")),
            menuInfo: {
                "/dashboard": {
                    icon: "icondaohangshouye",
                },
                "/user": {
                    icon: "iconbumenguanli",
                },
                "/role": {
                    icon: "iconjiaosequanxian",
                },
            },
        };
    },
    methods: {
        handleCommand(command) {
            console.log("command", command);
            if (command === "logout") {
                // 清空 sessionStorage
                window.sessionStorage.clear();
                // 调转到登录
                this.$router.push("/login");
            }
        },
    },
};
</script>

<style lang="less">
.admin-index {
    height: 100%;

    .el-container,
    .el-aside,
    .el-menu {
        height: 100%;
    }

    .el-aside {
        overflow-y: hidden;

        .header {
            height: 60px;
            padding: 0 15px;
            border-bottom: 1px solid rgba(0, 0, 0, 0.1);

            img {
                width: 40px;
                height: 40px;
                margin-right: 15px;
            }
        }
    }

    .el-header {
        background-color: #f0f0f0;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .profile {
            span {
                display: inline-block;
                width: 32px;
                height: 32px;
                line-height: 32px;
                text-align: center;
                background-color: #409eff;
                color: #fff;
                font-size: 16px;
                border-radius: 50%;
            }
        }
    }
}
</style>
